<template>
  <div class="settings-view">
    <div class="settings-container">
      <!-- 左侧导航 -->
      <div class="settings-sidebar">
        <div v-for="item in navItems" 
             :key="item.key"
             class="nav-item"
             :class="{ active: currentSection === item.key }"
             @click="currentSection = item.key"
        >
          <i :class="item.icon"></i>
          <span>{{ item.label }}</span>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="settings-content">
        <!-- 个人信息设置 -->
        <div v-if="currentSection === 'profile'" class="settings-section">
          <div class="section-header">
            <h2>个人信息</h2>
            <p class="section-desc">管理您的账号信息和偏好设置</p>
          </div>

          <el-form 
            ref="profileFormRef"
            :model="profileForm"
            :rules="profileRules"
            label-position="top"
            class="settings-form"
          >
            <div class="form-group">
              <div class="avatar-upload">
                <el-avatar :size="80" :src="avatarUrl || undefined">
                  {{ profileForm.username?.charAt(0).toUpperCase() }}
                </el-avatar>
                <el-upload
                  class="upload-btn"
                  :action="`${apiUrl}/api/settings/upload/avatar`"
                  :headers="{
                    Authorization: `Bearer ${token}`
                  }"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  accept="image/jpeg,image/png,image/gif"
                >
                  <el-button size="small">更换头像</el-button>
                </el-upload>
              </div>
            </div>

            <el-form-item label="用户名" prop="username">
              <el-input v-model="profileForm.username" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="profileForm.email" type="email" />
            </el-form-item>

            <el-form-item label="时区" prop="timezone">
              <el-select v-model="profileForm.timezone" style="width: 100%">
                <el-option label="Asia/Shanghai (UTC+8)" value="Asia/Shanghai" />
                <el-option label="America/New_York (UTC-5)" value="America/New_York" />
                <el-option label="Europe/London (UTC+0)" value="Europe/London" />
                <el-option label="Asia/Tokyo (UTC+9)" value="Asia/Tokyo" />
                <el-option label="Australia/Sydney (UTC+10)" value="Australia/Sydney" />
                <el-option label="Pacific/Auckland (UTC+12)" value="Pacific/Auckland" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleProfileUpdate">
                保存更改
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 安全设置 -->
        <div v-if="currentSection === 'security'" class="settings-section">
          <div class="section-header">
            <h2>安全设置</h2>
            <p class="section-desc">管理您的密码和安全选项</p>
          </div>

          <div class="security-options">
            <!-- 修改密码 -->
            <div class="security-card">
              <div class="card-header">
                <div class="card-title">
                  <i class="fas fa-key"></i>
                  <h3>修改密码</h3>
                </div>
                <el-button @click="showChangePassword = true">修改</el-button>
              </div>
              <p class="card-desc">定期更改密码可以提高账号安全性</p>
            </div>

            <!-- 双因素认证 -->
            <div class="security-card">
              <div class="card-header">
                <div class="card-title">
                  <i class="fas fa-shield-alt"></i>
                  <h3>双因素认证</h3>
                </div>
                <el-switch v-model="twoFactorEnabled" @change="handle2FAChange" />
              </div>
              <p class="card-desc">使用身份验证器或短信验证码进行双重验证</p>
            </div>

            <!-- 登录设备 -->
            <div class="security-card">
              <div class="card-header">
                <div class="card-title">
                  <i class="fas fa-laptop"></i>
                  <h3>登录设备</h3>
                </div>
                <el-button @click="showDevices = true">查看</el-button>
              </div>
              <p class="card-desc">查看和管理已登录的设备</p>
            </div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div v-if="currentSection === 'notifications'" class="settings-section">
          <div class="section-header">
            <h2>通知设置</h2>
            <p class="section-desc">自定义您接收通知的方式</p>
          </div>

          <div class="notification-settings">
            <div class="notification-group">
              <h3>部署通知</h3>
              <div class="setting-item">
                <div class="setting-info">
                  <h4>部署开始</h4>
                  <p>当项目开始部署时通知我</p>
                </div>
                <el-switch v-model="notificationSettings.deployStart" />
              </div>
              <div class="setting-item">
                <div class="setting-info">
                  <h4>部署完成</h4>
                  <p>当项目部署完成时通知我</p>
                </div>
                <el-switch v-model="notificationSettings.deployComplete" />
              </div>
              <div class="setting-item">
                <div class="setting-info">
                  <h4>部署失败</h4>
                  <p>当项目部署失败时通知我</p>
                </div>
                <el-switch v-model="notificationSettings.deployFailed" />
              </div>
            </div>

            <div class="notification-group">
              <h3>通知方式</h3>
              <div class="setting-item">
                <div class="setting-info">
                  <h4>浏览器通知</h4>
                  <p>在浏览器中显示推送通知</p>
                </div>
                <el-switch 
                  v-model="notificationSettings.channels.browser"
                  @change="handleBrowserNotificationChange"
                />
              </div>
              <div class="setting-item">
                <div class="setting-info">
                  <h4>邮件通知</h4>
                  <p>通过邮件接收通知</p>
                </div>
                <el-switch v-model="notificationSettings.channels.email" />
              </div>
            </div>
          </div>

          <div class="settings-actions">
            <el-button type="primary" @click="saveNotificationSettings">
              保存设置
            </el-button>
          </div>
        </div>

        <!-- 外观设置 -->
        <div v-if="currentSection === 'appearance'" class="settings-section">
          <div class="section-header">
            <h2>外观设置</h2>
            <p class="section-desc">自定义界面外观和主题</p>
          </div>

          <div class="appearance-settings">
            <div class="theme-preview">
              <div class="preview-window" :class="themeSettings.mode">
                <div class="preview-header"></div>
                <div class="preview-sidebar"></div>
                <div class="preview-content"></div>
              </div>
            </div>

            <div class="theme-options">
              <div class="option-group">
                <h3>主题模式</h3>
                <el-radio-group v-model="themeSettings.mode" class="theme-mode-group">
                  <el-radio-button value="light">
                    <i class="fas fa-sun"></i>
                    浅色
                  </el-radio-button>
                  <el-radio-button value="dark">
                    <i class="fas fa-moon"></i>
                    深色
                  </el-radio-button>
                  <el-radio-button value="system">
                    <i class="fas fa-desktop"></i>
                    跟随系统
                  </el-radio-button>
                </el-radio-group>
              </div>

              <div class="option-group">
                <h3>主题色</h3>
                <div class="color-presets">
                  <div v-for="color in colorPresets" 
                       :key="color.value"
                       class="color-item"
                       :class="{ active: themeSettings.primaryColor === color.value }"
                       :style="{ backgroundColor: color.value }"
                       @click="themeSettings.primaryColor = color.value"
                  ></div>
                </div>
              </div>

              <div class="option-group">
                <h3>其他选项</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <h4>紧凑模式</h4>
                    <p>减小界面元素间距</p>
                  </div>
                  <el-switch v-model="themeSettings.compact" />
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <h4>动画效果</h4>
                    <p>界面过渡动画</p>
                  </div>
                  <el-switch v-model="themeSettings.animations" />
                </div>
              </div>
            </div>
          </div>

          <div class="settings-actions">
            <el-button type="primary" @click="saveThemeSettings">
              应用设置
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showChangePassword"
      title="修改密码"
      width="400px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-position="top"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input 
            v-model="passwordForm.currentPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input 
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showChangePassword = false">取消</el-button>
          <el-button type="primary" @click="handlePasswordUpdate">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 登录设备对话框 -->
    <el-dialog
      v-model="showDevices"
      title="登录设备"
      width="600px"
    >
      <div class="devices-list">
        <div v-for="device in loginDevices" :key="device.id" class="device-item">
          <div class="device-info">
            <i :class="getDeviceIcon(device.type)"></i>
            <div class="device-details">
              <h4>{{ device.name }}</h4>
              <p>最后登录: {{ formatDate(device.lastLogin) }}</p>
              <p>IP: {{ device.ip }}</p>
            </div>
          </div>
          <el-button 
            type="danger" 
            size="small"
            @click="handleLogoutDevice(device.id)"
            :disabled="device.current"
          >
            {{ device.current ? '当前设备' : '退出登录' }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useSettingsStore } from '../store/settings'
import { useAuthStore } from '../store/auth'
import { ElMessage } from 'element-plus'
import { settingsApi } from '../api/settings'

const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000'
const token = ref(localStorage.getItem('token'))

const settingsStore = useSettingsStore()
const authStore = useAuthStore()

// 当前选中的设置项
const currentSection = ref('profile')

// 导航项
const navItems = [
  { key: 'profile', label: '个人信息', icon: 'fas fa-user' },
  { key: 'security', label: '安全设置', icon: 'fas fa-shield-alt' },
  { key: 'notifications', label: '通知设置', icon: 'fas fa-bell' },
  { key: 'appearance', label: '外观设置', icon: 'fas fa-paint-brush' }
]

// 个人信息表单
const profileForm = ref({
  username: '',
  email: '',
  timezone: 'Asia/Shanghai'
})

// 密码修改表单
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 通知设置
const notificationSettings = ref({
  deployStart: true,
  deployComplete: true,
  deployFailed: true,
  channels: {
    browser: false,
    email: false
  }
})

// 主题设置
const themeSettings = ref({
  mode: 'light',
  primaryColor: '#1a5cff',
  compact: false,
  animations: true
})

// 主题颜色预设
const colorPresets = [
  { value: '#1a5cff', label: '默认蓝' },
  { value: '#00b578', label: '翠绿' },
  { value: '#ff8800', label: '橙色' },
  { value: '#ff3141', label: '红色' },
  { value: '#722ed1', label: '紫色' },
  { value: '#13c2c2', label: '青色' },
  { value: '#2f54eb', label: '靛青' },
  { value: '#fa8c16', label: '日落' },
  { value: '#eb2f96', label: '玫红' },
  { value: '#52c41a', label: '青柠' }
]

// 对话框控制
const showChangePassword = ref(false)
const showDevices = ref(false)

// 其他状态
const loading = ref(false)
const avatarUrl = ref(authStore.user?.avatarUrl || '')
const loginDevices = ref([])
const twoFactorEnabled = ref(false)

// 表单验证规则
const profileRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的箱地址', trigger: 'blur' }
  ]
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}

// 初始化数据
const initData = async () => {
  try {
    loading.value = true;
    
    // 初始化 store
    await settingsStore.initialize();
    const settings = settingsStore.settings;
    
    // 初始化表单数据
    profileForm.value = {
      username: authStore.user?.username || '',
      email: authStore.user?.email || '',
      timezone: settings.interface?.timezone || 'Asia/Shanghai'
    };

    // 初始化通知设置
    notificationSettings.value = settings.notifications;

    // 初始化主题设置
    themeSettings.value = settings.interface?.theme;

    // 获取登录设备
    const devices = await settingsApi.getLoginDevices();
    loginDevices.value = devices;

  } catch (error) {
    ElMessage.error('获取设置失败: ' + error.message);
  } finally {
    loading.value = false;
  }
};

// 保存主题设置
const saveThemeSettings = async () => {
  try {
    // 先保存到后端
    const response = await settingsStore.updateSettings('interface', {
      theme: themeSettings.value,
      timezone: profileForm.value.timezone
    });

    // 成功后再应用到前端
    if (response?.interface?.theme) {
      settingsStore.applyThemeSettings(response.interface.theme);
    }
    ElMessage.success('主题设置保存');
  } catch (error) {
    ElMessage.error('保存失败: ' + error.message);
  }
};

// 保存通知设置
const saveNotificationSettings = async () => {
  try {
    await settingsApi.updateSettings('notifications', notificationSettings.value);
    ElMessage.success('通知设置已保存');
  } catch (error) {
    ElMessage.error('保存失败: ' + error.message);
  }
};

// 更新个人信息
const handleProfileUpdate = async () => {
  try {
    const user = await settingsApi.updateProfile(profileForm.value);
    authStore.user = user;
    ElMessage.success('个人信息已更新');
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '更新失败');
  }
};

// 更新密码
const handlePasswordUpdate = async () => {
  try {
    await settingsApi.updatePassword(passwordForm.value);
    ElMessage.success('密码已更新');
    showChangePassword.value = false;
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '更新失败');
  }
};

// 处理浏览器通知权限
const handleBrowserNotificationChange = async (value) => {
  if (value) {
    try {
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        notificationSettings.value.channels.browser = false;
        ElMessage.warning('需要允许通知权限才能接收浏览器通知');
      } else {
        await saveNotificationSettings();
      }
    } catch (error) {
      notificationSettings.value.channels.browser = false;
      ElMessage.error('您的浏览器不支持通知��能');
    }
  } else {
    await saveNotificationSettings();
  }
};

// 登出设备
const handleLogoutDevice = async (deviceId) => {
  try {
    await settingsApi.logoutDevice(deviceId);
    ElMessage.success('设备已登出');
    const devices = await settingsApi.getLoginDevices();
    loginDevices.value = devices;
  } catch (error) {
    ElMessage.error('操作失败: ' + error.message);
  }
};

// 处理双因素认证变更
const handle2FAChange = async (value) => {
  ElMessage.info('双因素认证功能开发中...')
  twoFactorEnabled.value = false
}

// 获取设备图标
const getDeviceIcon = (type) => {
  switch (type) {
    case 'desktop':
      return 'fas fa-desktop';
    case 'laptop':
      return 'fas fa-laptop';
    case 'tablet':
      return 'fas fa-tablet-alt';
    case 'mobile':
      return 'fas fa-mobile-alt';
    case 'browser':
      return 'fas fa-globe';
    default:
      return 'fas fa-question-circle';
  }
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 处理头像上传成功
const handleAvatarSuccess = (response) => {
  try {
    if (response.url && response.user) {
      // 更新本地头像URL
      avatarUrl.value = response.url;
      // 更新 auth store 中的用户信息
      authStore.updateUser(response.user);
      ElMessage.success('头像上传成功');
    } else {
      ElMessage.error('上传失败：未获取到头像URL或用户信息');
    }
  } catch (error) {
    ElMessage.error('上传失败：' + error.message);
  }
};

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  // 检查文件类型
  const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type);
  if (!isImage) {
    ElMessage.error('头像必须是图片格式！');
    return false;
  }

  // 检查文件大小（2MB）
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB！');
    return false;
  }

  return true;
};

// 在组件挂载时初始化
onMounted(() => {
  initData();
  // 确保从 auth store 中获取最新的头像 URL
  if (authStore.user?.avatarUrl) {
    avatarUrl.value = authStore.user.avatarUrl;
  }
});

const previewTheme = (theme) => {
  const previewWindow = document.querySelector('.preview-window');
  if (previewWindow) {
    previewWindow.style.transition = 'all 0.3s ease';
    settingsStore.applyThemeSettings({
      ...themeSettings.value,
      ...theme
    });
    setTimeout(() => {
      previewWindow.style.transition = '';
    }, 300);
  }
};

// 导出设置
const exportSettings = () => {
  const settings = settingsStore.settings;
  const dataStr = JSON.stringify(settings, null, 2);
  const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
  
  const exportFileDefaultName = `settings-${new Date().toISOString().slice(0,10)}.json`;
  
  const linkElement = document.createElement('a');
  linkElement.setAttribute('href', dataUri);
  linkElement.setAttribute('download', exportFileDefaultName);
  linkElement.click();
};

// 导入设置
const importSettings = async (event) => {
  try {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const settings = JSON.parse(e.target.result);
        await settingsStore.importSettings(settings);
        ElMessage.success('设置导入成功');
      } catch (error) {
        ElMessage.error('设置导入失败：' + error.message);
      }
    };
    reader.readAsText(file);
  } catch (error) {
    ElMessage.error('文件读取失败：' + error.message);
  }
};
</script>

<style scoped>
.settings-view {
  min-height: 100vh;
  padding: var(--spacing-lg);
  background: var(--background-primary);
}

.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--spacing-xl);
  background: var(--background-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: calc(100vh - 2 * var(--spacing-lg));
}

.settings-sidebar {
  padding: var(--spacing-lg);
  border-right: 1px solid var(--border-color);
  background: var(--background-secondary);
  position: sticky;
  top: var(--spacing-lg);
  height: calc(100vh - 2 * var(--spacing-lg));
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.nav-item:hover {
  background: var(--background-tertiary);
  color: var(--text-primary);
  transform: translateX(4px);
}

.nav-item.active {
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 500;
}

.nav-item i {
  width: 20px;
  text-align: center;
  font-size: 1.1em;
}

.settings-content {
  padding: var(--spacing-xl);
  background: var(--background-secondary);
  min-height: 100%;
}

.section-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
  font-size: 1.5em;
  font-weight: 600;
}

.section-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.settings-form {
  max-width: 480px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--background-tertiary);
  border-radius: var(--radius-lg);
}

.el-avatar {
  border: 4px solid var(--background-secondary);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.el-avatar:hover {
  transform: scale(1.05);
}

.security-options {
  display: grid;
  gap: var(--spacing-lg);
}

.security-card {
  padding: var(--spacing-lg);
  background: var(--background-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.security-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.card-title i {
  color: var(--primary-color);
  font-size: 1.2em;
}

.card-title h3 {
  font-weight: 500;
}

.card-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.notification-settings,
.appearance-settings {
  display: grid;
  gap: var(--spacing-xl);
}

.notification-group,
.option-group {
  background: var(--background-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-color);
}

.notification-group h3,
.option-group h3 {
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  font-weight: 500;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
  font-weight: 500;
}

.setting-info p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.theme-preview {
  margin-bottom: var(--spacing-xl);
}

.preview-window {
  aspect-ratio: 16/9;
  background: var(--background-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}

.preview-header {
  height: 48px;
  background: var(--background-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.preview-sidebar {
  position: absolute;
  left: 0;
  top: 48px;
  bottom: 0;
  width: 240px;
  background: var(--background-tertiary);
  border-right: 1px solid var(--border-color);
}

.preview-content {
  position: absolute;
  left: 240px;
  right: 0;
  top: 48px;
  bottom: 0;
  background: var(--background-primary);
}

.theme-mode-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: var(--spacing-sm);
}

.color-item {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.color-item:hover {
  transform: scale(1.1);
}

.color-item.active {
  border-color: var(--primary-color);
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

.settings-actions {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.devices-list {
  display: grid;
  gap: var(--spacing-md);
}

.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--background-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.device-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.device-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.device-info i {
  font-size: 24px;
  color: var(--primary-color);
}

.device-details h4 {
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.device-details p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .settings-container {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .nav-item {
    margin-bottom: var(--spacing-xs);
  }
}
</style> 